<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
	<head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>CSS buttons with pseudo-elements</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="CSS buttons with pseudo-elements" />
        <meta name="keywords" content="css, css3, pseudo, buttons, anchor, before, after, web design" />
        <meta name="author" content="Sergio Camalich for Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style3.css" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://tympanus.net/Tutorials/AnimatedWebBanners/">
                    <strong>&laquo; Previous Demo: </strong>Animated Web Banners With CSS3
                </a>
                <span class="right">
                    <a href="http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			<header>
                <h1>CSS <span>buttons</span></h1>
                <h2>with pseudo-elements</h2>
                <nav class="codrops-demos">
					<a href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a class="current" href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
					<a href="index5.html">Demo 5</a>
                <nav>
			</header>
			<section>
                <div id="container_buttons">
                    <p>
						<a class="a_demo_three" href="#">
                            Click me!
                        </a>
                        <a class="a_demo_three" href="#">
                            Click me!
                        </a>
                    </p>
                    <p>
                        <a href="#" class="a_demo_three second_button">
                            Come on, don't be afraid
                        </a>
                    </p>
                    <p>
                        <a href="#" class="a_demo_three third_button">
                            You can make this as wide as you want ;)
                        </a>
                    </p>
                </div>
			</section>
        </div>
    </body>
</html>
